<template>
  <div>
    <h3>{{}}的歌曲列表</h3>
  </div>
</template>

<script>
export default {
name:"MusicDetail",
// props:["id","age"],
beforeCreate(){
    console.log("musicdetail","bforCreate");
},
mounted(){
    // 我们想要获取动态路由params传值，需要使用$router
    // $router.params是一个对象，包含params传递过来的数据
    console.log("*************musicdetail");
},
updated(){
    console.log("*******updated");
},
computed:{
    name(){
        const{id}=this.$route.params
        switch(id){
            case "1":
                return "周杰伦";
             case "2":
                return "林俊杰";
             case "3":
                return "陈奕迅"; 
                default:
                    return "xxxx"   
        }
    }
},
beforeRouteEnter(to,from,next){
    console.log(to,from,next);
    console.log("路由内进入时守卫");
    console.log(this);
    next(()=>{
        console.log(this);
    })
},
beforeRouteUpdate(to,from,next){
    console.log(to,from,next,"beforeRouteUpdate");
    console.log("组件内更新时");
    next()
},
beforeRouteLeave(to,from,next){
    console.log(to,from,next,"beforeRouteLeave");
    console.log("组件离开时");
    next()
},
watch:{
    $$route(newVal){
        console.log("动态路由更新参数",newVal);
    }
}
}
</script>

<style>

</style>